/**
 * touch 事件解决 300ms 延迟问题
 */


import React from 'react'

class DemoFive extends React.Component {

  touchstart(ev) {
    let finger = ev.changedTouches[0]
    this.touch = {
      pageX: finger.pageX,
      pageY: finger.pageY,
      isMouve: false
    }
  }

  touchmove(ev) {
    let finger = ev.changedTouches[0]
    let changeX = finger.pageX - this.touch.pageX,
      changeY = finger.pageY - this.touch.pageY;

    if (Math.abs(changeX) > 10 || Math.abs(changeY) > 10) {
      this.touch.isMouve = true
    }
  }

  touchend() {
    if (this.touch.isMouve) return
    // 否则就是我们正常单击事件 并且移除了300ms 延迟
    console.log('....');
  }

  render() {
    return <>
      <button onTouchStart={(ev) => this.touchstart(ev)}
        onTouchMove={(ev) => this.touchmove(ev)}
        onTouchEnd={(ev) => this.touchend(ev)}>
        提交</button>
    </>
  }
}

export default DemoFive